import { useEffect, useState } from 'react';
import styled from 'styled-components';
import { wechatFormatter } from '../utils/wechatFormatter';

const PreviewContainer = styled.div`
  height: 100%;
  overflow: auto;
  padding: 1.5rem;
  background: white;
  color: #2f2f2f;
  font-size: 15px;
  line-height: 1.75;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  img {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 1em 0;
  }

  code {
    font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  ul, ol {
    padding-left: 1.5em;
    margin: 1em 0;
  }

  li {
    margin: 0.5em 0;
  }
`;

interface PreviewProps {
  markdown: string;
}

export const Preview: React.FC<PreviewProps> = ({ markdown }) => {
  const [html, setHtml] = useState('');

  useEffect(() => {
    const rendered = wechatFormatter.format(markdown);
    setHtml(rendered);
  }, [markdown]);

  return (
    <PreviewContainer>
      <div 
        className="wechat-preview"
        dangerouslySetInnerHTML={{ __html: html }} 
      />
    </PreviewContainer>
  );
};
